<template>
  <view
    :class="[
      'diy-page',
      useNav ? 'useFoot' : '',
      showGoodsShare ? 'no-scroll' : '',
    ]"
    v-if="page"
  >
    <view class="diy-page-bg" :style="[pageCss]"></view>
    <view
      class="template-section"
      v-for="(item, index) in templates"
      :key="index"
      :id="item.comName"
    >
      <!-- 轮播图及头部导航 -->
      <goodsSwiper
        v-if="item.comName == 'goodsSwiperImgs' && goodsInfo"
        :goodsInfo="goodsInfo"
        :propsData="item"
        :hideTopTab="hideTopTab"
        :topTabActiveIndex="topTabActiveIndex"
        @scrollToNode="scrollToNode"
      ></goodsSwiper>
      <!-- 商品介绍 -->
      <goodsIntroduce
        v-if="item.comName == 'goodsIntroduce' && goodsInfo"
        :propsData="item"
        :goodsInfo="goodsInfo"
        @shareGood="showGoodsShare = !showGoodsShare"
      ></goodsIntroduce>
      <!-- 商品活动优惠 -->
      <goodsDiscount
        v-if="
          item.comName == 'goodsDiscount' &&
          goodsInfo &&
          (couponList.length || cardList.length)
        "
        :propsData="item"
        :goodsInfo="goodsInfo"
        :couponList="couponList"
        :cardList="cardList"
        @showCoupon="couponPopupShow"
        @showActive="activePopupShow"
      ></goodsDiscount>

      <!-- 溯源 -->
      <view
        class=""
        v-if="have_product_traceability == 1 && index == 0"
        style="
          margin: 0 0 12px 0;
          border-radius: 8px;
          padding: 0 10px;
          position: relative;
          overflow: hidden;
        "
      >
        <view
          class=""
          style="
            background-color: #ffffff;
            background-image: ;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            opacity: 100;
            border-radius: 8px;
            width: 100%;
            left: 10px;
            border-radius: 25rpx;
          "
        >
          <view class="" style="width: 100%; padding: 4.8vw 0 4.8vw 4.8%">
            <view
              class=""
              style="
                width: 100%;
                display: flex;
                align-items: center;
                padding-right: 4.8vw;
              "
              @click="get_history()"
            >
              <view
                class=""
                style="
                  width: 82rpx;
                  font-size: 26rpx;
                  font-weight: 600;
                  color: #262626;
                "
              >
                溯源
              </view>
              <view
                class=""
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  padding-right: 4.8vw;
                "
              >
                该商品支持<text style="color: #f1270c">正版溯源</text>
              </view>
              <i
                class="iconfont icon-arrow-right"
                style="
                  font-size: 22rpx;
                  font-style: normal;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                "
              ></i>
            </view>
          </view>
        </view>
      </view>

      <!-- 商品属性、运费、送至 -->
      <goodsAttribute
        v-if="item.comName == 'goodsAttribute' && goodsInfo && addressList"
        ref="goods_sku"
        :propsData="item"
        :goodsInfo="goodsInfo"
        :skuText="skuText"
        :mdId="mdId"
        :mdData="mdData"
        :addressList="addressList"
        @chooseSku="selectSku"
        @gotoAddressList="gotoMyAddress"
      ></goodsAttribute>
      <!-- 商品评价 -->
      <goodsEvaluate
        v-if="item.comName == 'goodsEvaluate' && goodsInfo"
        :propsData="item"
        :goodsInfo="goodsInfo"
      ></goodsEvaluate>
      <!-- 商品店铺入口 -->
      <!-- <goodsShopEntry
        v-if="item.comName == 'goodsShopEntry' && shopmsg"
        :propsData="item"
        :mch="shopmsg.mch"
      ></goodsShopEntry> -->
      <!-- 推荐商品 -->
      <!-- <goodsRecommend
        v-if="item.comName == 'goodsRecommend' && goodsInfo"
      ></goodsRecommend> -->
      <!-- 商品详情富文本 -->
      <goodsRichText
        v-if="item.comName == 'goodsRichText' && goodsInfo"
        :goodsInfo="goodsInfo"
      ></goodsRichText>
      <!-- 底部导航 -->
      <goodsFootNav
        v-if="item.comName == 'goodsFootNav' && goodsInfo"
        :propsData="item"
        :goodsInfo="goodsInfo"
        @addCart="addCart"
        @buyNow="rightBuy"
        @clickYuyue="clickYuyue"
      ></goodsFootNav>
    </view>
    <controls :controlList="controlList"></controls>

    <!-- sku弹框 -->
    <newSkuPopup
      ref="skuPopup"
      :finalmsg="finalmsg"
      :shopmsg="shopmsg"
      :subIndex="subIndex"
      :shopimg="shopimg"
      :diyTemplates="templates"
      @closeSkuPopup="closeSkuPopup"
      @selectPushData="selectPushData"
      @setSelectNum="setSelectNum"
      @buyNow="confirmBuy"
    ></newSkuPopup>

    <!-- 送至弹框 -->
    <sendPopup
      ref="sendPopup"
      :addressList="addressList"
      @selectAddressEnd="selectAddressEnd"
    ></sendPopup>

    <!-- 优惠券弹框 -->
    <couponPopup
      :popupTitle="$t('goods.discountTitle')"
      ref="couponPopup"
      v-if="couponList.length && goodsInfo"
      :couponList="couponList"
      :cardData="goodsInfo.verify_card_id"
    ></couponPopup>

    <!-- 活动tank -->
    <cardPopup
      ref="activePopup"
      v-if="goodsInfo && goodsInfo.verify_card_id.length"
      :cardData="goodsInfo.verify_card_id"
    ></cardPopup>

    <!-- 分享 -->
    <goodsShare
      v-if="showGoodsShare"
      :topic_id="goodsInfo.id"
      @closeShare="showGoodsShare = false"
    ></goodsShare>

    <!-- 时间日历选择 -->
    <timePopup
      v-if="shopmsg"
      :serveData="serveData"
      :hotelData="hotelData"
      :product_type="shopmsg.product_type"
      @timeConfirm="timeConfirm"
      ref="timePopup"
    ></timePopup>
  </view>
</template>

<script>
import controls from "@/components/diyNew/controls/index.vue";
import goodsSwiper from "./goodsSwiper/index.vue";
import goodsIntroduce from "./goodsIntroduce/index.vue";
import goodsDiscount from "./goodsDiscount/index.vue";
import goodsAttribute from "./goodsAttribute/index.vue";
import goodsEvaluate from "./goodsEvaluate/index.vue";
import goodsShopEntry from "./goodsShopEntry/index.vue";
import goodsFootNav from "./goodsFootNav/index.vue";
import goodsRichText from "./goodsRichText/index.vue";
import goodsRecommend from "./goodsRecommend/index.vue";

import goodsShare from "./components/goodsShare.vue";

import newSkuPopup from "@/integral/components/skuPopup.vue";
import sendPopup from "./components/sendPopup.vue";
import couponPopup from "./components/couponPopup.vue";
import activePopup from "./components/activePopup.vue";
import cardPopup from "./components/cardPopup.vue";
import timePopup from "./components/timePopup.vue";

export default {
  props: {
    goods_id: {
      type: String,
      default: "",
    },
    mdId: {
      type: String,
      default: "0",
    },
    mdData: {
      type: Object,
      default: {},
    },
    pageScrollTop: {
      type: Number,
      default: 0,
    },
    hideTopTab: {
      type: Boolean,
      default: true,
    },
    topTabActiveIndex: {
      type: Number,
      default: 0,
    },
  },
  components: {
    controls,
    goodsSwiper,
    goodsIntroduce,
    goodsDiscount,
    goodsAttribute,
    goodsEvaluate,
    goodsShopEntry,
    goodsFootNav,
    goodsRichText,
    goodsRecommend,
    goodsShare,
    sendPopup,
    couponPopup,
    activePopup,

    newSkuPopup,
    cardPopup,
    timePopup,
  },
  data() {
    return {
      templates: [],
      page: null,
      controlList: [],
      useNav: false,
      goodsInfo: null,
      hotelData: {
        // 弹框显示与隐藏
        show: false,
        // 时间列表
        date_book: [],
        num: 1,
      },
      serveData: {
        show: false,
        service_book: [],
        num: 1,
      },
      shopmsg: null, //商品信息
      attr: [],
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      goodsInfoNew: {}, //当规格选择完成时重新覆盖商品信息
      skutitlename: "", //提示用户例如：请选择温度，口味；或者提示用户已选择温度，口味
      skutitlenamelist: [], //存储规格标题
      skuId: "", //规格id
      selectArr: [], //存放被选中的值	selectArr: [], //存放被选中的值
      showSkuPopup: false, //控制选择商品类型弹窗的显示与隐藏
      finalmsg: null, //选取规格后的商品数量，以及是否为会员价格信息
      subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
      shopimg: "", //选择商品规格时的商品图片
      value: 1, // sku选择的数量
      id: 0, // 商品id
      addressList: [],
      showGoodsShare: false,
      couponList: [],
      cardList: [],
      isLogin: false,
      submitType: "",
    };
  },
  computed: {
    pageCss() {
      if (this.page) {
        let pageCss = JSON.parse(JSON.stringify(this.page.pageCss));
        if (pageCss?.padding) delete pageCss.padding;
        if (pageCss?.borderRadius) delete pageCss.borderRadius;
        return pageCss;
      } else {
        return "";
      }
    },
    skuText() {
      if (this.skuId != "") {
        let str = [];
        this.skuId.forEach((item) => {
          str.push(item.attr_name);
        });
        return str.join(",");
      } else {
        return this.$t("diy.sku");
      }
    },
  },
  mounted() {
    // uni.showLoading({
    //   title: this.$t("home.loading"),
    // });
    this.getDiySystemPages();
    this.getAddressList();
    if (this.goods_id) {
      this.id = this.goods_id;
      this.getGoodsDetail(this.goods_id);
      this.getDiscountsList();
    }
  },
  watch: {},
  methods: {
    confirmBuy() {
      if (this.submitType == "buy") {
        this.rightBuy();
      } else {
        this.addCart();
      }
    },
    scrollToNode(e) {
      if (e.id == 0) {
        uni.pageScrollTo({
          duration: 300,
          scrollTop: 0
        });
      } else {
        this.gotoPing(e.id);
      }
    },
    gotoPing(id) {
      const query = uni.createSelectorQuery().in(this);
      let selecter = "#" + id;
      query
        .select(selecter)
        .boundingClientRect((data) => {
          let top = data.top;
          if (this.pageScrollTop) {
            top = top + this.pageScrollTop;
          }
          top = top - 100;
          uni.pageScrollTo({
            duration: 300,
            scrollTop: top
          });
        })
        .exec();
    },
    // 获取diy系统页面配置数据
    getDiySystemPages() {
      this.$allrequest.diyNew.getDiySystemPages().then((res) => {
        uni.stopPullDownRefresh();
        if (!res.code) {
          let list = res.data.list;
          let data = {};
          if (!list.length) return;
          list.forEach((d) => {
            d.template = JSON.parse(d.template);
            if (d.template.system_type == "goodsDetail") {
              data = d;
            }
          });
          if (!data?.id) return;
          this.page = data.template;
          let arr = [
            // {
            //   comName: "goodsRecommend",
            //   name: "商品详情页面-商品推荐",
            // },
            {
              comName: "goodsRichText",
              name: this.$t("diy.detail"),
            },
          ];
          data.template.templates.push(...arr);
          this.templates = data.template.templates;
          res.data.controls = JSON.parse(res.data.controls);
          this.controlList = res.data.controls;
          let [footNav] = this.controlList.filter((d) => {
            return d.show_type == "nav";
          });
          if (footNav && footNav.is_show) {
            this.useNav = true;
          }
        }
      });
    },
    // 获取商品详情数据
    getGoodsDetail(id) {
      uni.showLoading({
        title: this.$t("facePay.requesting"),
      });
      this.$allrequest.goods
        .goodsDetails({ id })
        .then((res) => {
          uni.hideLoading();
          if (!res.code) {
            res.data.attr = JSON.parse(res.data.attr);
            if (res.data.video_url) {
              res.data.pic_list.unshift({
                type: "video",
                pic_url: res.data.video_url,
              });
            }

            this.goodsInfo = JSON.parse(JSON.stringify(res.data));
            this.shopmsg = res.data;

            // 过滤预约时间
            this.filterYuyueDate(res.data);
            // 记录浏览历史
            this.recordBrowse();

            // 预处理sku
            var attr_group_list = res.data.attr_group_list;
            for (var i = 0; i < attr_group_list.length; i++) {
              for (var j = 0; j < attr_group_list[i].attr_list; j++) {
                attr_group_list[i].attr_list[j].ischeck = false;
              }
            }

            this.swiperlength = res.data.pic_list.length;
            this.carouselmap = true;

            if (this.shopmsg.pic_list.length != 0) {
              if (this.shopmsg.pic_list[0].type != "video") {
                this.shopimg = this.shopmsg.pic_list[0].pic_url;
              } else {
                if (this.shopmsg.pic_list.length > 1) {
                  this.shopimg = this.shopmsg.pic_list[1].pic_url;
                }
              }
            }

            for (var i of this.shopmsg.attr) {
              var sp = "";
              for (var j of i.attr_list) {
                sp += j.attr_id + "_";
              }
              if (sp.length > 0) {
                sp = sp.substr(0, sp.length - 1);
              }
              this.shopItemInfo[sp] = i;
            }
            for (var m of this.shopmsg.attr_group_list) {
              this.skutitlenamelist.push(m.attr_group_name);
            }
            this.checkItem();
            this.$nextTick(() => {
              this.getSku();
              try {
                const query = uni.createSelectorQuery().in(this);
                // 商品
                let goodsInfo = "#goodsAttribute";
                query
                  .select(goodsInfo)
                  .boundingClientRect((data) => {
                    this.$emit("goodsBlockLocalData", {
                      t: data.top,
                      h: data.height,
                    });
                  })
                  .exec();
                // 评论
                const query2 = uni.createSelectorQuery().in(this);
                let goodsEvaluate = "#goodsEvaluate";
                query2
                  .select(goodsEvaluate)
                  .boundingClientRect((data) => {
                    this.$emit("goodsEvaluateLocalData", {
                      t: data.top,
                      h: data.height,
                    });
                  })
                  .exec();
                // 详情
                let selecter = "#goodsRichText";
                const query3 = uni.createSelectorQuery().in(this);
                query3
                  .select(selecter)
                  .boundingClientRect((data) => {
                    this.$emit("goodsRichTextLocalData", {
                      t: data.top,
                      h: data.height,
                    });
                  })
                  .exec();
              } catch (err) {
              }
            });
            uni.hideLoading();
          } else {
            uni.showToast({
              title: res.msg,
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        })
        .catch(() => {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        });
    },
    // 获取用户地址列表
    async getAddressList() {
      // 判断是否登录
      const isLogin = this.$utils.isLogin(false);
      if (!isLogin) return;
      try {
        const res = await this.$allrequest.user.address_list();
        this.addressList = res.data.list;
      } catch (e) {}
    },
    // 获取优惠列表
    async getDiscountsList() {
      try {
        const res = await this.$allrequest.goods.getGoodYouHui({
          id: this.goods_id,
        });
        if (res.code == 0) {
          this.cardList = res.data.data;
          this.couponList = res.data.coupon;
        }
      } catch (e) {}
    },
    // 获取当前年月日, 判断预约时间
    getDate() {
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      const res = uni.getSystemInfoSync();
      if (res.system.indexOf("iOS") > -1) {
        return `${y}/${m}/${d}`;
      } else {
        return `${y}-${m}-${d}`;
      }
    },
    filterYuyueDate(data) {
      // 获取当前时间
      let currentDate = this.getDate();
      let filterData = [];

      // 获取当前时间
      let date = new Date();
      let hh = date.getHours();
      let ff = date.getMinutes();
      let currentTime = `${hh}:${ff}`;
      let currentDateTime = `${currentDate} ${currentTime}`;

      switch (data.product_type) {
        // 酒店预约
        case 1:
          this.hotelData.num = this.value;
          // 根据日期过滤
          filterData = data.date_book.date_book.filter((item) => {
            if (
              new Date(item.date).getTime() >= new Date(currentDate).getTime()
            ) {
              return item;
            }
          });
          // 赋值酒店组件时间列表
          this.hotelData.date_book = Object.assign(data.date_book, {
            date_book: filterData,
          });
          break;

        // 服务预约
        case 2:
          this.serveData.num = this.value;
          // 根据日期过滤
          filterData = data.service_book.data.filter((item) => {
            // 日期大于等于当前时间且有二级分类
            if (
              new Date(item.date).getTime() >=
                new Date(currentDate).getTime() &&
              item.time.length
            ) {
              return item;
            }
          });

          if (!filterData.length) break;
          // 根据二级时间段过滤 11:00-14:00
          let newTime = filterData[0].time.filter((item) => {
            if (
              new Date(`${currentDate} ${item.end_time}`).getTime() >
                new Date(currentDateTime).getTime() &&
              item.times.length
            ) {
              return item;
            }
          });

          if (!newTime.length) {
            filterData.splice(0, 1);
          } else {
            filterData[0].time = newTime;

            // 过滤三级时间 10:00-14:00
            let newTimes = filterData[0].time[0].times.filter((item) => {
              let timeArr = item.time.split("-");

              // 当前时间向前提15分钟,如果开始时间还大于当前时间则可以预约   也表示开始15分钟后可以预约
              if (
                new Date(`${currentDate} ${timeArr[0]}`).getTime() >
                new Date(currentDateTime).getTime() - 15 * 60 * 1000
              ) {
                return item;
              }
            });

            if (newTimes.length) {
              filterData[0].time[0].times = newTimes;
            } else {
              filterData[0].time.splice(0, 1);
              if (!filterData[0].time.length) {
                filterData.splice(0, 1);
              }
            }
          }
          this.serveData.service_book = Object.assign(data.service_book, {
            data: filterData,
          });
          break;
        default:
          break;
      }
    },
    // 点击预约按钮
    clickYuyue() {
      switch (this.shopmsg.product_type) {
        // 酒店
        case 1:
          if (this.hotelData.date_book.date_book?.length) {
            // this.hotelData.show = true;
            this.$refs.timePopup.showPopup();
          } else {
            uni.showToast({
              title: this.$t("diy.noTime"),
              icon: "none",
            });
          }
          break;
        // 服务
        case 2:
          if (this.serveData.service_book.data?.length) {
            this.serveData.show = true;
            // this.$refs.timePopup.showPopup();
          } else {
            uni.showToast({
              title: this.$t("diy.noTime"),
              icon: "none",
            });
          }
          break;
        default:
          break;
      }
    },
    //处理数据
    checkItem() {
      var option = this.shopmsg.attr_group_list;
      var result = []; //定义数据存储被选中的值)
      for (let i = 0; i < option.length; i++) {
        result[i] = this.selectArr[i] ? this.selectArr[i] : "";
      }
      for (let i = 0; i < option.length; i++) {
        var last = result[i];
        for (var k = 0; k < option[i].attr_list.length; k++) {
          result[i] = option[i].attr_list[k].attr_id;
          option[i].attr_list[k].isShow = this.isMay(result);
        }
        result[i] = last;
      }
      this.shopmsg.attr_group_list = [];
      this.$set(this.shopmsg, "attr_group_list", option);

      this.getInfo(this.selectArr);
    },
    // 判断库存是否为0
    isMay(result) {
      for (var i in result) {
        if (result[i] == "") {
          return true;
        }
      }
      result = result.join("_");
      if (!this.shopItemInfo[result]) {
        return false;
      }
      return this.shopItemInfo[result].num == 0 ? false : true;
    },
    // 预约时间数据发生改变
    hotelDataChange(val) {
      this.hotelData = val;
    },
    //
    timeConfirm(e) {
      if (this.shopmsg.product_type == 1) {
        this.hotelData.num = e.num;
      }
      if (this.shopmsg.product_type == 2) {
        this.serveData.num = e.num;
      }
      this.rightBuy(e.list);
    },
    // 酒店提交预约
    submitHotel(list) {
      this.rightBuy(list);
    },
    // sku选择弹框数量选择回调
    setSelectNum(e) {
      this.value = e;
    },
    //立即购买, 预约提交
    rightBuy(list) {
      this.submitType = "buy";
      var submitOrder = [];
      // return
      if (!this.shopmsg.attr || !this.shopmsg.attr.length) {
        return;
      }
      if (this.shopmsg.attr[0].num < 1) {
        return uni.showToast({
          title: "商品库存不足",
          icon: "none",
        });
      }
      submitOrder = [
        {
          mch_id: this.shopmsg.mch ? this.shopmsg.mch.id : 0,
          goods_list: [
            {
              goods_id: this.shopmsg.id,
              num: 1,
              attr: [{ attr_group_id: this.shopmsg.attr_group_list[0].attr_group_id, attr_id: this.shopmsg.attr_group_list[0].attr_list[0].attr_id }],
            },
          ],
		  product_type: 4
        },
      ];
      uni.navigateTo({
        url:
          "/order/order-submit/order-submit?submit=" +
          JSON.stringify(submitOrder),
      });
    },
    toAddCart() {},
    //添加到购物车
    addCart() {
      this.submitType = "addCart";
      if (!this.$refs.skuPopup.showSkuPopup) {
        this.$refs.skuPopup.showPopup();
        return;
      }
      if (this.finalmsg == "" || this.finalmsg == undefined) {
        uni.showToast({
          title: this.$t("diy.sku"),
          icon: "none",
        });
        return;
      }

      if (this.value > this.finalmsg.num || this.value > this.shopmsg.num) {
        uni.showToast({
          title: this.$t("diy.stock"),
          icon: "none",
        });
        return;
      }

      this.$allrequest.goods
        .addCart({
          goods_id: this.id,
          attr: JSON.stringify(this.attr),
          num: this.value,
        })
        .then((res) => {
          this.show = !this.show;
          if (res.code == 0) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            // 加购成功后，关闭sku弹框
            this.closeSkuPopup();
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
    },
    // 预约时间数据发生改变
    serveDataChange(val) {
      this.serveData = val;
    },
    // 服务提交预约
    serveSubmit(formData) {
      this.rightBuy(formData);
    },
    //记录浏览记录
    recordBrowse() {
      var params = {
        id: this.id,
        type: 0, //1：商户，0：商品
      };
      this.$allrequest.goods.browse(params).then((res) => {});
    },
    // 获取sku属性
    getSku() {
      let goods_sku = this.$refs.goods_sku;
      if (goods_sku) {
        goods_sku[0].getInfo();
      }
    },
    selectAddressEnd() {
      let goods_sku = this.$refs.goods_sku;
      if (goods_sku) {
        goods_sku[0].updateAddress();
      }
    },
    //获取选定的值
    getInfo(item) {
      var checked = item.join("_");
      if (this.shopItemInfo[checked]) {
        this.goodsInfoNew = this.shopItemInfo[checked];
        this.skutitlename =
          this.$t("common.choosed") +
          "：" +
          this.shopItemInfo[checked].supplier_price;
        this.skuId = this.shopItemInfo[checked].attr_list;
      } else {
        this.goodsInfoNew = {};
        var skutitle = [];
        for (var i = 0; i < this.skutitlenamelist.length; i++) {
          if (this.skutitlenamelist[i]) {
            skutitle.push(this.skutitlenamelist[i]);
          }
        }
        this.skutitlename =
          this.$t("common.noChoose") + " " + skutitle.toString(",");
        this.skuId = "";
      }
      if (this.skuId) {
        this.arrt_list = [];
        for (var i = 0; i < this.skuId.length; i++) {
          this.arrt_list.push(this.skuId[i].attr_id);
        }
        this.arrt_list.join(",");
        this.getPriceNum(this.arrt_list);
      }
    },
    //通过选取规格获取该规格下的商品准确价格
    getPriceNum(arrt_list) {
      var params = {
        goods_id: this.shopmsg.id,
        attr_list: arrt_list,
        number: this.value,
      };
      try {
        params.attr_list = JSON.stringify(params.attr_list);
        this.$allrequest.goods.goodsAttrInfo(params).then((res) => {
          if (res.code == 0) {
            this.finalmsg = res.data;
          }
        });
      } catch (e) {
      }
    },
    //显示和关闭商品规格内容
    selectSku() {
      this.$refs.skuPopup.showPopup();
    },
    // 关闭sku弹框
    closeSkuPopup() {
      this.$refs.skuPopup.hidePopup();
    },
    // 选择sku回调
    selectPushData(e) {
      let { id, pindex, index, disable, attr_group_id } = { ...e };
      this.pushData(id, pindex, index, disable, attr_group_id);
    },
    pushData(id, pindex, index, disable, attr_group_id) {
      if (!disable) {
        return "";
      }
      if (this.selectArr[pindex] != id) {
        this.selectArr[pindex] = id;
        this.subIndex[pindex] = index;
        this.skutitlenamelist[pindex] = "";
        this.attr[pindex] = {
          attr_id: id,
          attr_group_id: attr_group_id,
        };
      }
      this.checkItem();
    },
    // 跳转我的地址列表
    gotoMyAddress() {
      if (this.addressList.length) {
        this.$refs.sendPopup.showPopup();
      } else {
        this.$utils.toUrl("/user/my/addressmanage?is_order=1");
      }
    },
    // 展示优惠券弹框
    couponPopupShow() {
      if (this.couponList.length) this.$refs.couponPopup.showPopup();
    },
    // 展示赠送的核销卡
    activePopupShow() {
      if (this.goodsInfo.verify_card_id.length)
        this.$refs.activePopup.showPopup();
    },
  },
};
</script>

<style lang="scss" scoped>
.diy-page {
  width: 100%;
  overflow-y: auto;
  position: relative;
  .diy-page-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #f2f2f2;
  }
}
.no-scroll {
  overflow: hidden;
  height: 100vh;
}
.useFoot {
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
</style>
